import { Tabs, Space, Button } from 'antd'
import { useState } from 'react'
import { useRequest } from 'ahooks'
import { Link } from 'react-router-dom'
import { getFodderApi } from '../../../api/fodder'
import FodderSwiper from './FodderSwiper'
import FodderTable from './FodderTable'
import Authority from '../../../components/Authority'

const { TabPane } = Tabs
const AdvertisingFodder = () => {
  const { data = [], run: updataData } = useRequest(getFodderApi)
  const [activeKey, setActiveKey] = useState('1')
  const handleActiveKey = (key) => {
    setActiveKey(key)
  }
  const operations = <Authority accessRole={2}><Link to="/advertising/tactics"><Button type="primary">新增素材</Button></Link></Authority>
  return (
    <Space direction="vertical" style={{ display: 'flex', padding: '10px' }}>
      <Tabs activeKey={activeKey} onChange={handleActiveKey} tabBarExtraContent={{ right: operations }}>
        <TabPane tab="素材列表" key="1">
          <FodderTable data={data} refersh={updataData} />
        </TabPane>
        <TabPane tab="广告素材" key="2">
          <FodderSwiper data={data} />
        </TabPane>
      </Tabs>
    </Space>
  )
}
export default AdvertisingFodder;
